<template>
  <div class="weui-grids">
    <a href="javascript:;" class="weui-grid" v-for="(item, index) in list" @click="$emit('on-click', index)">
      <div class="weui-grid__icon">
        <img :src="item.img" alt="" v-if="item.img">
        <i class="iconfont" v-html="item.icon" v-if="item.icon" style="font-size:28px" :style="{color:item.color}"></i>
      </div>
      <p class="weui-grid__label">
        {{item.label}}
      </p>
    </a>
  </div>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default() {
          return [{
            img: require('../assets/logo.png'),
            label: '我是label'
          }]
        }
      }
    }
  }
</script>

<style>
  @import '~weui/dist/style/weui.min.css';
</style>
